<template>
<!-- 订单 -->
  <div id="Administration">
    <div id="managements">
      <!--搜索框 -->
      <div id="manage-top">
        <el-input placeholder="请输入订单编号" style="width:200px;" v-model="allPages.orderNo"></el-input>
        <el-select v-model="allPages.status" clearable placeholder="请选择订单状态">
          <el-option 
            style="height:46px"
            v-for="item in orderStatus"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <button type="button" class="el-button el-button--primary" @click="management()">
          <i class="el-icon-search"></i><span>查找</span>
        </button>
      </div>
      <div class="block">
          <el-date-picker        
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
          <el-select v-model="allPages.type" clearable placeholder="等出库">
          <el-option
            style="height:46px"
            v-for="item in orderStatus"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
         </el-select>
         <el-button type="primary"  icon="el-icon-download" @click="exports()">
          <samp>导出</samp>
         </el-button>
        <el-button type="primary" icon="el-icon-download">
          <samp>汇总</samp>
         </el-button>
        </div>  
      <div>
         <el-table
         border
      :cell-class-name="tableRowClassName"
    :data="tableData"
    style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="联系人">
            <span>{{ props.row.consignee }}</span>
          </el-form-item>
           <el-form-item label="联系电话号码">
            <span>{{ props.row.phone }}</span>
          </el-form-item>
           <el-form-item label="客服备注">
            <span>{{ props.row.adminMono }}</span>
          </el-form-item>
            </el-form>
          </template>
            </el-table-column>
            <el-table-column label="订单编号" prop="orderNo"></el-table-column>
          <el-table-column label="用户ID" prop="userId"></el-table-column>
          <el-table-column label="订单状态" prop="status">
            <template slot-scope="scope">
                <el-tag>{{scope.row.status|statusList()}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="支付渠道" prop="payChannel">
            <template slot-scope="scope">
                <el-tag>{{scope.row.payChannel|payChannelList()}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="订单金额" prop="actualPrice">
            <template slot-scope="scope">
                {{scope.row.actualPrice|actualPriceList()}}
            </template>
          </el-table-column>
          <el-table-column label="创建时间" prop="gmtUpdate">
            <template slot-scope="scope">
                {{scope.row.gmtUpdate|formatDate()}}
            </template>
          </el-table-column>
          <el-table-column label="物流渠道" prop="shipCode">
            <template slot-scope="scope">
                <el-tag>{{scope.row.shipCode|shipCodeList()}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="物流单号" prop="shipNo"></el-table-column>
          <el-table-column label="备注" prop="spuLocation"></el-table-column>
          <el-table-column align="right" label="操作" width="250px;">      
            <template slot-scope="scope">
              <el-button size="mini" @click="particulars(scope.row)" class="kohlrabiblue" v-Promise="'operation:order:detail'">详情</el-button>
              <el-button size="mini" @click="distribution(scope.row)" class="kohlrabiblue"  v-if="scope.row.status==20" v-Promise="'operation:order:ship'">配送单</el-button>
              <el-button size="mini" @click="refund(scope.row)" class="kohlrabiblue" v-if="scope.row.status==60" v-Promise="'operation:order:refund'">退货</el-button>
              <el-button size="mini" @click="delivery(scope.row)" class="kohlrabiblue"  v-if="scope.row.status==20">发货</el-button>
            </template>
          </el-table-column>
          </el-table>
      </div>
      <div>
        <el-dialog :title="titleName" :visible.sync="dialogFormVisible">
          <div class="loginRight">
            <div class="login-right">
              <el-form
                :model="ruleForm"
                status-icon
                ref="ruleForm"
                label-width="150px"
                class="demo-ruleForm"
              >
              <el-form-item label="订单编号" >
                {{ruleForm.orderNo}}
              </el-form-item>
              <el-form-item label="用户ID">
                {{ruleForm.userId}}
              </el-form-item>
              <el-form-item label="订单渠道">
                {{ruleForm.channel}}
              </el-form-item>
              <el-form-item label="订单状态">  
                  <el-tag>{{ruleForm.status|statusList()}}</el-tag>
              </el-form-item>
              <el-form-item label="支付渠道">
                    <el-tag>{{ruleForm.payChannel|payChannelList()}}</el-tag>
              </el-form-item>
              <el-form-item label="用户留言">
                <span></span>
              </el-form-item>
              <el-form-item label="客服备注">
                {{ruleForm.adminMono}}
                 <button type="button" class="el-button el-button--primary" @click="compiles()">
                    <i class="el-icon-edit"></i><span>编辑</span>
                  </button>
              </el-form-item>
              <el-form-item label="配送运费">
                {{ruleForm.freightPrice|freightPricelist()}}
              </el-form-item>
              <el-form-item label="收货信息">
               {{'(收货人)'+ruleForm.consignee+'(手机号)'+ruleForm.phone+'(地址)'+ruleForm.province+ruleForm.city+ruleForm.county+ruleForm.address}}
              </el-form-item>
                 <el-form-item label="商品信息">
                    <el-table style="width:100%" :data="ruleForm.skuList">
                      <el-table-column prop="spuTitle" label="名称"></el-table-column>
                      <el-table-column prop="title" label="规格"></el-table-column>
                      <el-table-column prop="num" label="商品数量"></el-table-column>
                      <el-table-column prop="unit" label="单位"></el-table-column>
                      <el-table-column prop="price" label="总价(单价*数量)">
                      </el-table-column>
                    </el-table>
                </el-form-item> 
              </el-form>
            </div>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary"  @click="affirm()">
              <div>确 定</div>
            </el-button>
          </div>
        </el-dialog>
      </div>
        <!-- 第二个弹出框 -->
        <div>
        <el-dialog :title="titleNames" :visible.sync="FormVisible" width="900px">
          <div class="loginRight">
            <div class="login-right">
              <el-form
                status-icon
                ref="site"
                label-width="150px"
                class="demo-ruleForm"               
              > 
              <el-form-item label="等级">
                  <el-radio-group v-model="radio">
                    <el-radio :label="0">无色</el-radio>
                    <el-radio :label="1">绿色</el-radio>
                    <el-radio :label="2">橙色</el-radio>
                    <el-radio :label="3">红色</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item  label="内容">
                  <el-input style="width:200px;" v-model="input"></el-input>
                </el-form-item>
              </el-form>
            </div>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="FormVisible= false">取 消</el-button>
            <el-button type="primary" @click="confirm">
              <div>确 定</div>
            </el-button>
          </div>
        </el-dialog>
      </div>
       <!-- 发货 -->
        <div>
        <el-dialog :title="titleNames" :visible.sync="FormVisibles" width="900px">
          <div class="loginRight">
            <div class="login-right">
              <el-form
                :model="shipments"
                ref="shipments"
                status-icon
                label-width="150px"
                class="demo-ruleForm"               
              > 
              <el-form-item label="快递公司">
                <el-select v-model="shipments.shipCode">
                <el-option
                  style="height:46px"
                  v-for="item in orderStatus"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              </el-form-item>
              <el-form-item label="快递编号">
                <el-input style="width:220px;" v-model="shipments.orderNo"></el-input>
              </el-form-item>
              </el-form>
            </div>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="FormVisibles= false">取 消</el-button>
            <el-button type="primary" @click="confirmb">
              <div>确 定</div>
            </el-button>
          </div>
        </el-dialog>
      </div>
       <!-- 退货 -->
        <div>
        <el-dialog :title="titleNames" :visible.sync="FormVisibleReturn" width="900px">
          <div class="loginRight">
            <div class="login-right">
              <el-form
                status-icon
                label-width="150px"
                class="demo-ruleForm"               
              > 
              <el-form-item label="快递公司">
                <span>
                  允许退款后钱会退回对方账户，请确认您已经收到退货
              </span>
              </el-form-item>
              <el-form-item label="操作">
                <el-radio-group v-model="radios">
                  <el-radio :label="0">拒绝退款</el-radio>
                  <el-radio :label="1">允许退款</el-radio>
                </el-radio-group>
                <p>
                  <el-input style="width:200px;" v-if="radios==1"></el-input>
                </p>
              </el-form-item>
              </el-form>
            </div>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="FormVisibleReturn= false">取 消</el-button>
            <el-button type="primary" @click="confirms">
              <div>确 定</div>
            </el-button>
          </div>
        </el-dialog>
      </div>
      <!-- current-change当前页size-change每页条数current-page当前页数，支持 .sync 修饰符page-sizes每页显示条目个数，支持 .sync 修饰符-->
        <Paging @handle="handles" :allPages="allPages"></Paging>
    </div>
  </div>
</template>
<script>
import order from "@/api/order.js";
import Paging from "../../components/Paging"; //分页
import qs from "qs";
export default {
   components: {
    Paging
  },
  data() {
    return {
      input:"",
      orderNo:"",
      value:'',
      conceal:false,
      shows:false,
      //地区   
      alltype:"",allPages:"",
      id:"",
      compileID:true,
      // multiple:true, //单项布尔值
      radios:0,
      radio:0, //单项
      search: "",
      titleName: "", //是否添加还是编辑
      titleNames:"",//二次是否添加还是编辑
      tableData: [],//渲染列表数组
      dialogFormVisible: false, //弹窗口
      FormVisible:false, 
      FormVisibles:false, 
      FormVisibleReturn:false,
      refundTitlel:false,
      orderStatus:[
        {
          value:10,
          label: "未付款"
        },
        {
          value:12,
          label: "正在拼团"
        },
        {
          value:20,
          label: "待出库"
        },
        {
          value:30,
          label: "待收货"
        },
        {
           value:40,
          label: "待评论"
        },
        {
           value:50,
          label: "已完成"
        },
        {
           value:60,
          label: "退款中"
        },
        {
          value:70,
          label: "已退款"
        },
        {
          value:80,
          label: "已取消"
        },
        {
          value:90,
          label: "已取消(系统)"
        }
      ],
       allPages: {
        currentPage: 1, //当前的默认的页数
        eachpage:20, //默认的页码
        total: 0, //初始值共数据条
        totalPageNo: 1,
        orderNo:"",
        status:''
       },

      ruleForm: [],
     shipments:{},
     reimburse:{}
    }
  },
    //时间戳
  filters: {
     formatDate: function(value) {
      let date = new Date(value);
      // let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      return value ?  MM + "月" + d + "日" + h + "时" + m + "分" : "无";
    },
    payChannelList:function(value){
        switch (value) {
          case "WX":return value="微信支付"         
          break;
           case "OFFLINE":return value="下线支付"         
          break; 
        }
      return value?value:'未支付'
    },
    statusList:function(value) {
      switch (value) {
        case 10:
          return value = "未付款";
        case 12:
          return value = "正在拼团";
        case 20:
          return value = "待出库";
        case 30:
          return value = "待收货";
        case 40:
          return value = "待评论";
        case 50:
          return value = "已完成";
        case 60:
          return value = "退款中";
        case 70:
          return value = "已退款";
        case 80:
          return value = "已取消";
        case 90:
          return value = "已取消(系统)";
      }
    },
    actualPriceList:function(value) {
      return '¥'+value/100
    },
    shipCodeList:function(value) {
      switch (value) {
        case 'ZTO':
          return value = "圆通快递";
           break;
        case 'HTKY':
          return value = "百世快递";
         break;  
      }
       return value?value:'未发货';
    },
    freightPricelist:function(value) {
      return value==0?'免运费':'不免运费'
    }
  },
  methods: {
     // 导入导出
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    },
    exports() {
      let _this=this
      order.derive(_this.ruleForm).then(function(res){
        if (res.data.errno==200) {
            require.ensure([], () => {
          const { export_json_to_excel } = require("../../vendor/Export2Excel");
          const tHeader = [
            "订单编号","用户ID","订单状态","支付渠道","订单金额","创建时间","物流渠道","物流单号","备注"];
          const filterVal = ["orderNo","userId","status","payChannel","actualPrice","gmtUpdate","shipCode","shipNo","spuLocation"
          ];
          const list = _this.tableData;
          const data = _this.formatJson(filterVal, list);
          export_json_to_excel(tHeader, data, "订单表格");
      });
        } 
      })
      
    },
    distribution(row){
      let _this=this
      let data={
        orderId:row.id
      }
      order.distri(data).then(function(res){
         if (res.data.errno==200) {
               require.ensure([], () => {
        const { export_json_to_excel } = require("../../vendor/Export2Excel");
        const tHeader = [
          "订单编号","商品名称","规格","单位","配送数量","收件人","联系方式","区域划分","客服备注",'用户备注'];
        const filterVal = ["orderNo","spuTitle","title","unit","num","consignee","phone","province","adminMono"
        ];
        const list = _this.tableData;
        const data = _this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, "订单信息");
      });
         } 
      })
    },
   tableRowClassName({row,columnIndex}) {
        if (columnIndex=== 1) {
         if(row.adminMonoLevel==1){
             return 'success-row';
          }else if (row.adminMonoLevel==2) {
              return 'succes-row';
          }else if (row.adminMonoLevel==3) {
             return 'warning-row';
          }else{
              return '';
          }
        }
    }, 
    affirm(){
      this.dialogFormVisible=false
    },
  // 详情
  particulars(row){
    let _this=this
    _this.titleName = "订单详情";
      order.details(row.id).then(function(res) {
        console.log(res.data)
          _this.ruleForm=res.data.data
          _this.dialogFormVisible = true; //弹出框
      })
  },
  compiles(){
    this.FormVisible = true; //弹出框
    this.titleName = "发货";
  },
  //发货
  delivery(row){
    this.FormVisibles = true; //弹出框
    this.titleName = "发货";
    this.shipments={...row}
  },
  confirmb(){
    let _this=this
         let data={
         orderNo:_this.shipments.orderNo,
        shipCode:_this.shipments.shipCode,
        shipNo:_this.shipments.shipNo
    }
    order.deliver(data).then(function(res){
      if (res.data.errno==200) {
         _this.$information.success('发货成功')
        _this.management()
        _this.FormVisibles = false;
      } else {
        _this.$information.error('发货失败')
      }
    })
    },
    // 退款
  refund(row){
    this.FormVisibleReturn=true
    this.titleName = "退货";
    this.reimburse={...row}
  },
   confirms(){
      let _this=this
     let data={
      type:_this.radios,
      orderNo:_this.reimburse.orderNo
    }
    order.refund(data).then(function(res){
      if (res.data.errno==200) {
        _this.management()
        _this.FormVisibleReturn=false
         _this.$information.success('退款成功')
      } else {
         _this.$information.error('退款失败')
      }
    })
  },
  //颜色
  confirm(){
     let _this=this
    order.colour(_this.radio,_this.input,_this.ruleForm.id).then(function(res){
      console.log(res)
          if (res.data.errno==200) {
        _this.FormVisible=false
        _this.management()
         _this.$information.success('修改成功')
      } else {
         _this.$information.error('修改失败')
      }     
    })
  }, 
  // 分页负值
    handles(val) {
      this.allPages = val;
      this.management();
    },
    // 运费数据列表
    management(){
      let _this = this;    
      order.orderData(_this.allPages).then(function(res) { 
        _this.tableData=res.data.data.items   
         // 分页
        _this.allPages.currentPage = res.data.data.pageNo;
        _this.allPages.eachpage = res.data.data.pageSize;
        _this.allPages.total = res.data.data.total;
        _this.allPages.totalPageNo = res.data.data.totalPageNo;    
      })
    },
  },   
  created() {
    this.management();
  },
   watch:{
    //重制
    dialogFormVisible(){
      this.$nextTick(() => {    
      this.$refs.ruleForm.clearValidate();
      })
    }
  }
};
</script>

<style lang="less" scoped>
#Administration {
  width: 100%;
  height: 100%;
}
#Administration ::-webkit-scrollbar {
  width: 0px !important;
}
#managements {
  width: 90vw;
  height: 80vh;
  margin: auto;
}
/* 表格样式*/
#block {
  margin-top: 30px;
}
.kohlrabiblue {
  background: #66b1ff;
  color: #ffffff;
}
.el-table--enable-row-transition/deep/.el-table__body td {
  text-align: center;
}
.el-table/deep/th.is-sortable {
  cursor: pointer;
  text-align: center;
}
.el-table td,
.el-table/deep/th.is-leaf{
  text-align: center;
}
.el-table/deep/.cell {
  text-align: center !important;
  font-size: 12px;
}
/* 弹出框*/
.loginRight {
  width: 100%;
  height: 100%;
  background: #ffffff;
  border-radius: 0px 8px 8px 0px;
}
.login-right {
  width: 90%;
  margin: auto;
}
/*  */
/deep/.el-dialog{width:900px !important;}
/deep/.el-form-item__content{
  width:650px !important;
}
.el-form-item .el-form-item--feedback .is-required/deep/.el-checkbox-group{
  width:4px !important;
  display: inline;
}
.block{
  margin: 20px 0px;
}
// 颜色
.el-table/deep/.warning-row {
    background:firebrick;
  }
.el-table/deep/.success-row {
    background: #7AB900;
  }
.el-table/deep/.succes-row {
    background:goldenrod;
  }
</style>